<template>
  <div class="dashboard-editor-container">
    <el-tabs class="border-card" @tab-click="handleTabClick">
      <el-tab-pane label="本地素材">
        <MaterialType ref="local" :type="'local'"></MaterialType>
      </el-tab-pane>
      <el-tab-pane label="网络素材">
        <MaterialType ref="net" :type="'net'"></MaterialType>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import MaterialType from "./components/MaterialType.vue";
import { connrequest } from "@/api/firstPage";
export default {
  name: "MaterialForm",
  components: {
    MaterialType
  },
  data() {
    return {
      type: "local"
    };
  },
  methods: {
    handleTabClick(tab) {
      if (tab.index === "0") {
        this.type = "local";
      } else {
        this.type = "net";
      }
      this.$refs[this.type].getData();
    }
  }
};
</script>

<style lang="scss" scoped>
::v-deep .el-tabs__nav-wrap::after,
::v-deep .el-tabs__active-bar {
  height: 0px;
}

::v-deep .el-tabs--top .el-tabs__item.is-top:nth-child(2) {
  padding-left: 20px;
}
::v-deep .el-tabs--top .el-tabs__item.is-top:last-child {
  padding-right: 20px;
}
::v-deep .el-tabs__header {
  background: #f5f7fa;
  border-bottom: 1px solid #dfe4ed;
}
::v-deep .el-tabs__item.is-active {
  background-color: #fff;
}
.border-card {
  background: #fff;
  border: 1px solid #dcdfe6;
}
.night {
  .el-tabs.el-tabs--top {
    ::v-deep .el-tabs__nav-scroll {
      background: #303445;
    }
    ::v-deep .el-tabs__item {
      color: #fff;
    }
    ::v-deep .el-tabs__item.is-active {
      background-color: #3e4252;
      color: #1890ff;
    }
  }
  .border-card {
    background: #2a2d3c;
    border: 1px solid #303445;
  }
}
</style>
